<!-- 打字游戏 -->
<!-- 
1、网页随机出现字母，并保存
2、监控松开键盘，判断当前字幕是不是在保存的变量中
    是的话加一分
-->
<style>
    *{margin: 0;padding: 0;}
    html,body{
        background-color: pink ;
        height: 100%;
    }
    .score{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 50px;
        height: 50px;
        border: dotted 10px yellow;
        text-align: center;
        font-size: 35px;
        
    }

</style>

<body>
    <div class="score">
        0
    </div>
</body>

<script>
    function random(min,max){
        return Math.floor(Math.random()*(max-min+1)+min)
    }


    
    //写定时器
    setInterval(function(){
        //造img
        var zmObj = document.createElement('div')
        zmObj.className = 'zm'
        var min = 0
        var max = 25
        var index = Math.floor(  Math.random() * (max-min+1)+min )
        zmObj.innerText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')[index]
        
        var w = random(50,80)
        zmObj.width = w
        zmObj.height = w
        zmObj.style.position = 'absolute'

        var maxW = (window.innerWidth||document.documentElement.clientWidth)
        var maxH = (window.innerHeight||document.documentElement.clientHeight)
        var l = random(0, maxW)
        var t = random(0, maxH)
        zmObj.style.left = l + 'px'
        zmObj.style.top = t + 'px'

         // 4 定时器中 - 追加到页面
        document.body.appendChild(zmObj)
    },1000)

    //监控键盘松开
    document.onkeyup = function(evt){
        var e = evt || window.event
        //直接从页面删除
        var zmm = document.querySelectorAll('div.zm')
        zmm.forEach(function(item){
            if(item.innerText.toLowerCase() ===e.key.toLowerCase()){
                document.body.removeChild(item)//删掉字母
                var num = parseInt(document.querySelector('.score').innerText)
                document.querySelector('.score').innerText = num+1

            }

        })
        
    }
</script>